<template>
	<view class="order-state">
		<view class="state">
			<view class="state-title margins flexCss-a">
				<text>订单状态</text>
				<view>在线客服</view>
			</view>
			<view class="steps">
				<view class="left">
					<view class="steps-a"><van-icon name="checked" color="#07c160" size="14" /></view>
					<view class="steps-b"></view>
				</view>
				<view class="right">{{ desc }}</view>
			</view>
		</view>

		<view class="order-info">
			<view class="title margins">订单信息</view>
			<view class="service margins">
				<view class="service-item flexCss-b">
					<view class="left">服务类型</view>
					<view class="right">{{ shopDetail.category }}</view>
				</view>
				<view class="service-item flexCss-b">
					<view class="left">服务时间</view>
					<view class="right">{{ shopDetail.cid }}</view>
				</view>
				<view class="service-item flexCss-b">
					<view class="left">服务地点</view>
					<view class="right">{{ shopDetail.address }}</view>
				</view>
				<view class="service-item flexCss-b">
					<view class="left">服务电话</view>
					<view class="right">{{ shopDetail.phone }}</view>
				</view>
			</view>
		</view>

		<view class="order-info">
			<view class="title margins">订单信息</view>
			<view class="service margins">
				<view class="service-item flexCss-a">
					<view class="left">
						服务价格
						<text style="margin-left: 50rpx;">{{ shopDetail.label }}</text>
					</view>
					<view class="right-a">{{ shopDetail.peice }}</view>
				</view>
				<view class="service-item flexCss-a">
					<view class="left">订单总价</view>
					<view class="right-a">{{ shopDetail.peice }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { ApiShopDetail } from '@/api/modules/order.js'
import { reactive, toRefs } from 'vue'
const state = reactive({
	desc: '',
	id: '',
	shopDetail: {}
})

const ddzt = () => {
	const { onsale } = state.shopDetail
	if (onsale == 1) {
		state.desc = '待支付'
	} else if (onsale == 2) {
		state.desc = '已支付'
	} else if (onsale == 3) {
		state.desc = '待派单'
	} else if (onsale == 4) {
		state.desc = '已派单'
	} else if (onsale == 5) {
		state.desc = '服务完成'
	} else {
		state.desc = '已取消'
	}
}

// 获取订单详情
const getOrderDetail = async () => {
	const { data } = await ApiShopDetail(state.id)
	console.log(data);
	state.shopDetail = data.data
	ddzt()
}

// 页面加载
onLoad(message => {
	console.log(message);
	state.id = message.id
	getOrderDetail()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { desc, shopDetail } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
	padding: 0;

	.order-state {
		.state {
			background-color: #fff;
			margin-top: 20rpx;
			height: 200rpx;
			overflow: hidden;
			.state-title {
				padding-top: 10rpx;
				border-bottom: 1rpx solid #f5f5ff;
				view {
					border: 1rpx solid #7f7f7f;
					padding: 10rpx 20rpx;
				}
			}
		}

		.steps {
			margin-left: 40rpx;
			display: flex;
			.left {
				.steps-b {
					margin-top: -7rpx;
					position: absolute;
					left: 52rpx;
					height: 80rpx;
					border-left: 2px solid #ebedf0;
					box-sizing: border-box;
				}
			}
			.right {
				margin-left: 10rpx;
				margin-top: 15rpx;
				color: #07c160;
			}
		}

		.order-info {
			margin-top: 20rpx;
			background-color: #fff;
			height: 400rpx;
			.title {
				height: 60rpx;
				padding: 20rpx 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid #f5f5ff;
			}
			.service {
				.service-item {
					height: 60rpx;
					.left {
						color: #848c99;
					}
					.right {
						margin-left: 50rpx;
					}
					.right-a {
						font-size: 28rpx;
					}
				}
			}
		}
	}
}
</style>
